<template>
  <el-select :value="valueId" :clearable="clearable" @clear="clearHandle">
    <el-option :value="valueId" :label="valueTitle">
      <el-tree id="tree-option"
               ref="selectTree"
               :accordion="accordion"
               :data="options"
               :props="props"
               :node-key="props.value"
               :default-expanded-keys="defaultExpandedKey"
               @node-click="handleNodeClick">
      </el-tree>
    </el-option>
  </el-select>
</template>
<script>
  module.exports = {
    name: 'el-tree-select',
    props: {
      /* 配置项 */
      props: {
        type: Object,
        default: function () {
          return {
            value: 'id',             // ID字段名
            label: 'title',         // 显示名称
            children: 'children'    // 子级字段名
          }
        }
      },
      /* 选项列表数据(树形结构的对象数组) */
      options: {
        type: Array,
        default: function () {
          return []
        }
      },
      /* 初始值 */
      value: {
        type: Number,
        default: function () {
          return null
        }
      },
      /* 可清空选项 */
      clearable: {
        type: Boolean,
        default: function () {
          return true
        }
      },
      /* 自动收起 */
      accordion: {
        type: Boolean,
        default: function () {
          return false
        }
      }
    },
    data() {
      return {
        valueId: this.value,    // 初始值
        valueTitle: '',
        defaultExpandedKey: []
      }
    },
    mounted() {
      this.initHandle()
    },
    methods: {
      // 初始化值
      initHandle() {
        var self = this;
        if (this.valueId) {
          for (var i = 0; i < self.options.length; i++) {
            var option = self.options[i];
            if (self.valueId == option[this.props.value]) {
              self.valueTitle = option[this.props.label]     // 初始化显示
              break;
            } else {
              if (option[this.props.children] && option[this.props.children].length > 0) {
                self.getValueTitle(option[this.props.children])
              }
            }
          }
          this.$refs.selectTree.setCurrentKey(this.valueId)       // 设置默认选中
          this.defaultExpandedKey = [this.valueId]      // 设置默认展开
        }
      },
      getValueTitle(options) {
        var self = this;
        for (var i = 0; i < options.length; i++) {
          var option = options[i];
          if (self.valueId == option[this.props.value]) {
            self.valueTitle = option[this.props.label]     // 初始化显示
            break;
          } else {
            if (option[this.props.children] && option[this.props.children].length > 0) {
              self.getValueTitle(option[this.props.children])
            }
          }
        }
      },
      // 切换选项
      handleNodeClick(node) {
        this.valueTitle = node.label
        this.valueId = node.id
        this.$emit('id', this.valueId)
        this.defaultExpandedKey = []
      },
      // 清除选中
      clearHandle() {
        this.valueTitle = ''
        this.valueId = null
        this.defaultExpandedKey = []
        this.clearSelected()
        this.$emit('id', null)
      },
      /* 清空选中样式 */
      clearSelected() {
        var allNode = document.querySelectorAll('#tree-option .el-tree-node')
        for (var i = 0; i < allNode.length; i++) {
          var element = allNode[i]
          element.classList.remove('is-current')
        }
      }
    },
    watch: {
      value() {
        this.valueId = this.value
        this.initHandle()
      }
    }
  }

</script>

<style>
  .el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
    height: auto;
    max-height: 274px;
    padding: 0;
    overflow: hidden;
    overflow-y: auto;
  }

  .el-select-dropdown__item.selected {
    font-weight: normal;
  }

  ul li >>> .el-tree .el-tree-node__content {
    height: auto;
    padding: 0 20px;
  }

  .el-tree-node__label {
    font-weight: normal;
  }

  .el-tree >>> .is-current .el-tree-node__label {
    color: #409EFF;
    font-weight: 700;
  }

  .el-tree >>> .is-current .el-tree-node__children .el-tree-node__label {
    color: #606266;
    font-weight: normal;
  }
</style>
